import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  strict: true,
  state: {
    color: [
      { rotate: 'rotate(18.94736842105263)', bgcol: 'fill:rgb(0, 150, 136)' },
      { rotate: 'rotate(56.84210526315789)', bgcol: 'fill:rgb(139, 195, 74)' },
      { rotate: 'rotate(75.78947368421052)', bgcol: 'fill:rgb(205, 220, 57)' },
      { rotate: 'rotate(94.73684210526315)', bgcol: 'fill:rgb(255, 235, 59)' },
      { rotate: 'rotate(113.68421052631578)', bgcol: 'fill:rgb(255, 193, 7)' },
      { rotate: 'rotate(132.6315789473684)', bgcol: 'fill:rgb(255, 152, 0)' },
      { rotate: 'rotate(151.57894736842104)', bgcol: 'fill:rgb(121, 85, 72)' },
      { rotate: 'rotate(170.52631578947367)', bgcol: 'fill:rgb(96, 125,139)' },
      { rotate: 'rotate(189.4736842105263)', bgcol: 'fill:rgb(158, 158,158)' },
      { rotate: 'rotate(208.42105263157893)', bgcol: 'fill:rgb(230, 74, 25)' },
      { rotate: 'rotate(227.36842105263156)', bgcol: 'fill:rgb(244, 67, 54)' },
      { rotate: 'rotate(246.3157894736842)', bgcol: 'fill:rgb(194, 24, 91)' },
      { rotate: 'rotate(265.2631578947368)', bgcol: 'fill:rgb(156, 39, 176)' },
      { rotate: 'rotate(284.2105263157895)', bgcol: 'fill:rgb(103, 58, 183)' },
      { rotate: 'rotate(303.1578947368421)', bgcol: 'fill:rgb(63, 81, 181)' },
      { rotate: 'rotate(37.89473684210526)', bgcol: 'fill:rgb(76, 175, 80)' },
      { rotate: 'rotate(322.1052631578947)', bgcol: 'fill:rgb(33, 150, 243)' },
      { rotate: 'rotate(0)', bgcol: 'fill:rgb(0, 188, 212)' },
      { rotate: 'rotate(341.05263157894734)', bgcol: 'fill:rgb(3, 169, 244)' },
    ],
    one: 'rgb(3, 169, 244)',
    two: '',
    count: 0,
  },
  mutations: {
    SET_COLOR(state, i) {
      state.count += 1
      if (state.count % 2 !== 0) {
        state.one = state.color[i].bgcol.replace('fill:', '')
      } else {
        if (state.one !== state.color[i].bgcol.replace('fill:', '')) {
          state.two = state.color[i].bgcol.replace('fill:', '')
        }
      }
    },
  },
  actions: {
    SET_COLOR(context, i) {
      if (context.state.one) {
        context.commit('SET_COLOR', i)
      }
    },
  },
})
